<template>
    <div >
        <div class="recommend-title">
            <span class="iconfont heart">&#xe757;</span>
            猜你喜欢</div>
            <ul>
                <router-link tag="li"
                             class="item border-bottom"
                             v-for="item of recommendList"
                             :key="item.id"
                             :to="'/detail/' + item.id"
                >
                    <div class="img-wrapper"><img class="img-content" :src="item.imgUrl"></div>
                    <div class="item-info">
                        <p class="item-title">{{item.itemtitle}}</p>
                        <p class="item-desc">{{item.itemdesc}}</p>
                        <button class="more">查看详情</button>
                    </div>
                </router-link>
            </ul>
    </div>
</template>

<script>
export default {
  name: 'HomeRecommend',
  props: {
    recommendList: {
      type: Array
    }
  }
}
</script>

<style scoped lang="stylus">
    @import '~styles/mixins.styl'
    .recommend-title
      line-height: 0.8rem
      background-color: #eeeeee
      text-indent: .2rem
      margin-top: 0.2rem
      font-size: 0.3rem
      .heart
        color: red
        font-size: 0.3rem
    .item
      display: flex
      width: 100%
      height: 2.6rem
      .img-wrapper
        height: 2rem
        width: 2rem
        overflow: hidden
        .img-content
          display: block
          height: 100%
          padding: 0.2rem
      .item-info
          position: relative
          flex: 1
          /*background-color: red*/
          padding: 0.1rem
          min-width: 0
        .item-title
          /*background-color: green*/
          line-height: 0.44rem
          font-size: 0.36rem
          padding: 0.1rem 0 0.2rem 0.2rem
        .item-desc
          font-size: 0.26rem
          line-height: 0.4rem
          height: 0.8rem
          padding: 0 0.2rem 0 0.2rem
          overflow: hidden
          text-indent: 0.52rem
          text-overflow: ellipsis
          display: -webkit-box
          -webkit-line-clamp: 2
          -webkit-box-orient: vertical
        .more
          width: 1.2rem
          float: right
          border-radius: 0.15rem
          margin-right: 0.2rem
          background-color: #ff9300
          text-align: center
          font-size: 0.26rem
          color: #ffffff
</style>
